<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #warspace{
            width: 300px;
            height: 500px;
            background-image: url('./imgs/background.png');
            margin: 0 auto;
            position: relative;
        }
        #fly{
            width: 40px;
            height: 50px;
            background-image: url('./imgs/z5.png');
            position: absolute;
            left: 130px;
            top: 400px;
            z-index: 999;
        }
        .egg{
            width: 20px;
            height: 20px;
            background-image: url('./imgs/BlueEgg.png');
            position: absolute;
            left: 10px;
            top: 10px;
            display: none;
            z-index: 666;
        }
    </style>
</head>
<body>
    <h1>JS 键盘示例 - 打飞机</h1>
    <hr>
    
    <div id="warspace">
        <div id="fly" style="left: 130px;top: 400px;"></div>
        <div id="egg1" class="egg" style="display: none;"></div>
        <div id="egg2" class="egg" style="display: none;"></div>
        <div id="egg3" class="egg" style="display: none;"></div>
        <div id="egg4" class="egg" style="display: none;"></div>
        <div id="egg5" class="egg" style="display: none;"></div>
        <div id="egg6" class="egg" style="display: none;"></div>
        <div id="egg7" class="egg" style="display: none;"></div>
        <div id="egg8" class="egg" style="display: none;"></div>
        <div id="egg9" class="egg" style="display: none;"></div>
    </div>


<script>
    // 控制飞机
    document.onkeydown = function(e) {
        // 获取飞机元素
        var fly = document.getElementById('fly');
        var x = fly.style.left;
        var y = fly.style.top;

        // 获取event对象
        var e = e || window.event;
        // 根据按键键码 控制飞机:
        switch (e.keyCode) {
            case 37: fly.style.left = Math.max(parseInt(x)-10, 0) + 'px'; break;
            case 38: fly.style.top = Math.max(parseInt(y)-10, 0) + 'px'; break;
            case 39: fly.style.left = Math.min(parseInt(x)+10, 260) + 'px'; break;
            case 40: fly.style.top = Math.min(parseInt(y)+10, 450) + 'px'; break;
            case 32: fire(parseInt(x),parseInt(y)); break;
        }
    }

    // 定义发射炮弹
    function fire(x, y) {
        for (var i = 1; i <= 9; i++) {
            var t = new Date();
            console.log(i + ':' , t.getTime());
            var egg =  document.getElementById('egg'+i);
            // 已显示的炮弹 不能在重新定位
            // 没有显示的炮弹 才能有定位
            if (egg.style.display == 'none') {
                // 给炮弹定位
                egg.style.left = (x + 10) + 'px';
                egg.style.top = (y - 10) + 'px';
                egg.style.display = 'block';
                return; //  选择合适的时机 跳出循环
            }
        }
    }

    // 让炮弹飞
    setInterval(biu, 30);
    function biu(){
        for (var i = 1; i <= 9; i++) {
            var egg =  document.getElementById('egg'+i);
            if (egg.style.display == 'block') {
                egg.style.top = parseInt(egg.style.top) - 10 + 'px';
                // 炮弹回收
                if (parseInt(egg.style.top) <= -10) {
                    egg.style.display = 'none';
                }
            }
        }
    }



</script>
</body>
</html>